import { CSSTransition } from 'react-transition-group'
import {
  useLocation,
  useRouteMatch
} from 'react-router-dom'

const withTransition = (WrappedComponent) => {
  return (props) => {
    const match = useRouteMatch({
      path: props.path
    })
    const location = useLocation()
    const to = location.state ? location.state.to : 'material'
    return (
      <CSSTransition
        in={!!match}
        timeout={1000}
        classNames={{
          enter: "animated",
          enterActive: to === 'material' ? 'slideInRight' : 'slideInLeft',
          exit: "animated",
          exitActive: to === 'material' ? 'slideOutLeft' : 'slideOutRight',
        }}
        mountOnEnter={true}
        unmountOnExit={true}
      >
        <WrappedComponent {...props}></WrappedComponent>
      </CSSTransition>
    )
  }
}

export default withTransition